@let poHelper = setHelper(label, additionalHelpTooltip);
<po-field-container
  [p-disabled]="disabled"
  [p-id]="id"
  [p-label]="label"
  [p-helper]="label ? poHelper.helperSettings : undefined"
  [p-show-helper]="label ? displayAdditionalHelp : undefined"
  [p-size]="size"
  [p-text-wrap]="labelTextWrap()"
>
  <div class="po-field-container-content" [attr.name]="name" [attr.p-size]="size">
    <div class="po-switch" [class.po-switch-aa]="size === 'small'" [attr.data-label-position]="getLabelPosition()">
      <div
        #switchContainer
        class="po-switch-container"
        [class.po-switch-container-aa]="size === 'small'"
        role="switch"
        [attr.aria-checked]="value"
        [attr.aria-disabled]="disabled"
        [attr.data-focused-element]="!disabled"
        [attr.data-inactive-component]="disabled"
        [id]="id"
        [tabindex]="disabled ? -1 : 0"
        (blur)="onBlur()"
        (click)="eventClick()"
        (keydown)="onKeyDown($event)"
      >
        <div class="po-switch-track" [class.po-switch-track-aa]="size === 'small'">
          <div
            class="po-switch-toggle"
            [class.po-switch-toggle-aa]="size === 'small'"
            [attr.aria-label]="value === true ? labelOn : labelOff"
          >
            @if (value === true) {
              <po-icon class="po-switch-icon" [class.po-switch-icon-aa]="size === 'small'" p-icon="ICON_OK"></po-icon>
            }
          </div>
        </div>
      </div>

      @if (!hideLabelStatus) {
        <po-label
          class="po-switch-label"
          [class.po-switch-label-aa]="size === 'small'"
          [p-disabled]="disabled"
          [p-label]="value === true ? labelOn : labelOff"
          (click)="eventClick()"
        >
        </po-label>
      }
    </div>
    @if ((!this.label && poHelperComponent()) || (!this.label && poHelper.hideAdditionalHelp)) {
      <po-helper
        #helperEl
        [p-size]="size"
        [p-helper]="poHelper.helperSettings"
        [p-disabled]="disabled"
        [p-append-in-body]="appendBox"
      >
      </po-helper>
    }
  </div>
  <po-field-container-bottom
    [p-append-in-body]="appendBox"
    [p-help]="help"
    [p-disabled]="disabled"
    [p-error-limit]="errorLimit"
    [p-error-pattern]="getErrorPattern()"
    [p-size]="size"
  ></po-field-container-bottom>
</po-field-container>
